<template>
  <div class="border-line card">
    <header-title
      title="保障人员分析"
      :style="{ 'font-size': fontSize + 'px' }"
      @fullScreen="handleFullScreen"
    ></header-title>
    <div class="card-content">
      <echarts-view ref="echarts" :options="option" height="260px"></echarts-view>
    </div>
  </div>
</template>

<script>
import headerTitle from './headerTitle.vue'
import { echartsView } from '@/components'
import { getProportionTypes } from '@/api/analysis'
import { setFontSize } from '@/utils/util'
export default {
  props: {
    areaID: {
      type: Number,
      default: 0,
    },
  },
  components: {
    headerTitle,
    echartsView,
  },
  data() {
    return {
      option: {},
      fontSize: 16,
    }
  },
  mounted() {
    this.fetchData()
    window.addEventListener('resize', this.screenAdatper)
  },
  watch: {
    areaID: function (newVal, oldVal) {
      this.fetchData()
    },
  },
  methods: {
    fetchData() {
      const lB = getProportionTypes({ RegionNo: this.areaID, mode: 'RYLB' })
      const HJ = getProportionTypes({ RegionNo: this.areaID, mode: 'HJ' })
      const BZFS = getProportionTypes({ RegionNo: this.areaID, mode: 'BZFS' })
      Promise.all([lB, HJ, BZFS]).then((res) => {
        this.option = {
          color: ['rgba(31, 164, 248, 1)', 'rgba(255, 228, 0, 1)', 'rgba(249, 90, 0, 1)', 'rgba(27, 199, 139, 1)'],
          tooltip: {
            trigger: 'item',
            confine: true,
          },
          title: [
            {
              text: '人员类别',
              left: '18%',
              top: '5%',
              textAlign: 'center',
              textStyle: {
                fontWeight: 'normal',
                color: '#ffffff',
              },
            },
            {
              text: '户籍',
              left: '52%',
              top: '5%',
              textAlign: 'center',
              textStyle: {
                fontWeight: 'normal',
                color: '#ffffff',
              },
            },
            {
              text: '保障类别',
              left: '84%',
              top: '5%',
              textAlign: 'center',
              textStyle: {
                fontWeight: 'normal',
                color: '#ffffff',
              },
            },
          ],
          series: [
            {
              name: '人员类别',
              type: 'pie',
              radius: ['35%', '50%'],
              avoidLabelOverlap: false,
              center: ['20%', '50%'],
              label: {
                show: false,
                position: 'center',
              },
              emphasis: {
                label: {
                  show: true,
                  color: '#fff',
                  formatter: '{b}\n{c}',
                  fontWeight: 'bold',
                },
              },
              labelLine: {
                show: false,
              },
              data: res[0],
            },
            {
              name: '户籍',
              type: 'pie',
              radius: ['35%', '50%'],
              avoidLabelOverlap: false,
              center: ['53%', '50%'],
              label: {
                show: false,
                position: 'center',
              },
              emphasis: {
                label: {
                  show: true,
                  color: '#fff',
                  formatter: '{b}\n{c}',
                  fontWeight: 'bold',
                },
              },
              labelLine: {
                show: false,
              },
              data: res[1],
            },
            {
              name: '保障类别',
              type: 'pie',
              radius: ['35%', '50%'],
              avoidLabelOverlap: false,
              center: ['85%', '50%'],
              label: {
                show: false,
                position: 'center',
              },
              emphasis: {
                label: {
                  show: true,
                  color: '#fff',
                  formatter: '{b}\n{c}',
                  fontWeight: 'bold',
                },
              },
              labelLine: {
                show: false,
              },
              data: res[2],
            },
          ],
        }
      })
    },
    handleFullScreen() {
      this.$emit('fullScreen')
    },
    screenAdatper() {
      this.$refs.echarts && this.$refs.echarts.chart.resize()
      this.option.fontSize = setFontSize(24)
      this.$refs.echarts.setOptions(this.option)
      this.fontSize = setFontSize(24)
    },
    beforeDestoryed() {
      window.removeEventListener('resize')
    },
  },
}
</script>
<style lang="less" scoped>
.card {
  height: 320px;
  &-content {
    margin-top: 20px;
  }
}
</style>
